import { getButtonPermissions } from '@/utils/utils';
import { Access } from '@umijs/max';
import { Space } from 'antd';
import { useMemo } from 'react';

type OperateButtonProps = {
  permissionsKey: string;
  title: string;
  onClick: (permissionsKey: string) => void;
  disabled?: boolean;
  hidden?: boolean;
};

type TableOperatesProps = {
  actions: OperateButtonProps[];
};

// 先定义 OperateButton
export const OperateButton = (props: OperateButtonProps) => {
  const accessible = useMemo(() => {
    const p = getButtonPermissions();
    return p.includes(props.permissionsKey);
  }, [props.permissionsKey]);

  if (props.hidden === true) {
    return null;
  }

  return (
    <Access accessible={accessible} key={props.permissionsKey}>
      <a
        className={props.disabled ? 'disableA' : 'editA'}
        onClick={props.disabled ? undefined : () => props.onClick?.(props.permissionsKey)}
      >
        {props.title}
      </a>
    </Access>
  );
};

// 再定义 TableOperates
const TableOperates = (props: TableOperatesProps) => {
  return (
    <Space wrap>
      {props.actions.map((v) => (
        <OperateButton key={v.permissionsKey} {...v} />
      ))}
    </Space>
  );
};

export default TableOperates;
